<template>
  <div style="padding: 8px;">
    <el-card>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="订单编号">
          <el-input size="small" v-model="formInline.recordId" placeholder="订单编号"></el-input>
        </el-form-item>
        <el-form-item label="用户邮箱">
          <el-input size="small" v-model="formInline.email" placeholder="用户邮箱"></el-input>
        </el-form-item>
        <el-form-item label="用户手机">
          <el-input size="small" v-model="formInline.phone" placeholder="用户手机"></el-input>
        </el-form-item>
        <!-- <el-form-item :label="$t('创建时间')">
            <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="formInline.createTime" size="small" type="datetime"
              :placeholder="$t('选择日期时间')">
            </el-date-picker>
        </el-form-item>-->
        <el-form-item>
          <el-button size="small" type="primary" @click="onSubmit">查询</el-button>
          <el-button size="small" type="primary" @click="reSet">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card v-loading="loading" style="margin-top: 8px;">
      <el-button style="margin-bottom: 8px;" type="success" @click="Manual">手动充值</el-button>
      <el-table size="medium" :data="tableData" style="width: 100%">
        <el-table-column prop="recordId" label="订单编号"></el-table-column>
        <el-table-column prop="phone" label="用户手机"></el-table-column>
        <el-table-column prop="email" label="用户邮箱"></el-table-column>
        <el-table-column prop="createTime" label="订单时间"></el-table-column>
        <el-table-column prop="remarks" label="备注"></el-table-column>
        <el-table-column prop="outAddress" label="USDT转出地址"></el-table-column>
        <el-table-column prop="amount" label="转入USDT数量"></el-table-column>
        <el-table-column prop="intoAddress" label="USDT转入地址"></el-table-column>
        <el-table-column prop="balanceUsdt" label="充值后结余"></el-table-column>
        <el-table-column prop="rechargeMethod" label="币种"></el-table-column>
        <el-table-column prop="rechargeType" label="充值类型">
          <template #default="{ row }">
            {{ row.rechargeType == 1 ? "自动充值" : "手动充值" }}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="float: right;margin: 5px 0;" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" layout="total, prev, pager, next" :total="total"></el-pagination>
    </el-card>
    <el-dialog title="手动充值" width="30%" :before-close="resetForm" :visible.sync="dialogFormVisible">
      <el-form ref="form" :rules="rules" label-position="right" label-width="80px" :model="form">
        <el-form-item prop="coinType" label="币种">
          <el-select style="width: 100%;" v-model="form.coinType" placeholder="请选择币种">
            <el-option label="ERC20" value="ERC20-USDT"></el-option>
            <el-option label="TRC20" value="TRC20-USDT"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="fromAddr" label="转出地址">
          <el-input v-model="form.fromAddr"></el-input>
        </el-form-item>
        <el-form-item prop="toAddr" label="转入地址">
          <el-input v-model="form.toAddr"></el-input>
        </el-form-item>
        <el-form-item prop="amount" label="交易金额">
          <el-input v-model="form.amount"></el-input>
        </el-form-item>
        <el-form-item prop="hash" label="交易哈希">
          <el-input v-model="form.hash"></el-input>
        </el-form-item>
        <el-form-item prop="remarks" label="备注">
          <el-input v-model="form.remarks"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getRecordsListApi,
  getRecordsEditApi
} from "@/api/appuser/rechargeRecord";
let validatePass = (rule, value, callback) => {
  if (value <= 0) {
    callback(new Error("交易金额必须大于0"));
  } else if (!/^[0-9]+.?[0-9]*$/.test(value)) {
    callback(new Error("请输入数字值"));
  } else {
    callback();
  }
};
export default {
  data() {
    return {
      loading: false,
      tableData: [],
      formInline: {
        recordId: null,
        phone: null,
        email: null
      },
      total: 0,
      page: {
        pageNum: 1,
        pageSize: 10
      },
      dialogFormVisible: false,
      form: {
        coinType: "TRC20-USDT",
        fromAddr: null,
        toAddr: null,
        amount: null,
        hash: null,
        remarks: null
      },
      rules: {
        coinType: { required: true, message: "请选择币种", trigger: "blur" },
        fromAddr: {
          required: true,
          message: "请输入转出地址",
          trigger: "blur"
        },
        toAddr: { required: true, message: "请输入转入地址", trigger: "blur" },
        amount: [
          { required: true, message: "请输入交易金额", trigger: "blur" },
          { validator: validatePass, trigger: "blur" }
        ],
        hash: { required: true, message: "请输入交易哈希值", trigger: "blur" }
      }
    };
  },
  created() {
    this.getRecordsList();
  },
  methods: {
    onSubmit() {
      this.page = {
        pageNum: 1,
        pageSize: 10
      };
      this.getRecordsList();
    },
    async getRecordsList() {
      this.loading = true;
      const res = await getRecordsListApi({
        ...this.page,
        ...this.formInline
      });
      console.log(res);
      this.tableData = res.list;
      this.total = res.total;
      this.loading = false;
    },
    reSet() {
      this.page = {
        pageNum: 1,
        pageSize: 10
      };
      this.formInline = {
        recordId: null,
        phone: null,
        email: null
      };
      this.getRecordsList();
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getRecordsList();
    },
    handleCurrentChange(val) {
      this.page.pageNum = val;
      this.getRecordsList();
    },
    Manual() {
      this.dialogFormVisible = true;
    },
    submit() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          console.log(this.form);
          await getRecordsEditApi(this.form);
          this.$message.success("充值成功!");
          this.resetForm();
        }
      });
    },
    resetForm() {
      this.dialogFormVisible = false;
      this.$refs.form.resetFields();
      this.getRecordsList();
    }
  }
};
</script>
<style lang='scss' scoped></style>